<template>
	<div class="p5 bg-gray90 br-gray80">
    <el-dialog :visible.sync="dialog4CreateVisible" append-to-body width="90%" destroy-on-close
      :close-on-click-modal="false">
      <div slot="title">{{ dialog4CreateTitle }}</div>
      <Create ref="create" @addTitle="updataCreateTitle" @submit2success="close()"></Create>
      <div slot="footer">
        <el-button  @click="close()">取消</el-button>
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialog4EditVisible" append-to-body width="90%" destroy-on-close
      :close-on-click-modal="false">
      <div slot="title">{{ dialog4EditTitle }}</div>
      <Edit ref="edit"></Edit>
      <div slot="footer">
        <!-- <small>实时修改</small> -->
        <el-button type="primary" @click="update()">提交修改</el-button>
      </div>
    </el-dialog>
    <div class="container">
      <div class="areaCtrl">
        <el-button type="" @click="getList">刷新</el-button>
        <el-button type="" @click="readyCreate">新增</el-button>
      </div>
      <div class="areaData">
        <el-table stripe border :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">{{ scope.row.idx }}</template>
          </el-table-column>
          <el-table-column label="时间" width="200">
            <template slot-scope="scope">{{ scope.row.addTime }}</template>
          </el-table-column>
          <el-table-column label="客户姓名" min-width="200">
            <template slot-scope="scope">{{ scope.row.cusName }}</template>
          </el-table-column>
          <el-table-column label="平台" width="200">
            <template slot-scope="scope">{{ scope.row.companyName }}</template>
          </el-table-column>
          <el-table-column label="报表ID" width="68">
            <template slot-scope="scope">{{ scope.row.rFReportFormsId }}</template>
          </el-table-column>
          <el-table-column label="报表title" min-width="200">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <span class="text-gray" v-if="scope.row.state === 0">未提交</span>
              <span class="text-yellow" v-if="scope.row.state === 1">审核中</span>
              <span class="text-green" v-if="scope.row.state === 2">通过</span>
              <span class="text-red" v-if="scope.row.state === 3">拒绝</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="400">
            <template slot-scope="scope">
              <!-- 0:未提交 1:审核中 2：通过 3:拒绝 (0,3状态可改为1， 1状态下可改为2，3) -->
              <template v-if="[0,3].includes(scope.row.state)">
                <el-button @click="ajaxObj4Edit(scope.row)" type="text" size="mini">编辑</el-button>
                <el-button @click="submitRF2examine(scope.row)" type="primary" size="mini">提交审核</el-button>
                <el-button @click="deleteRF(scope.row)" type="danger" size="mini">
                  <i class="fa fa-fw fa-trash-o"></i>删除
                </el-button>
              </template>
              <!-- <template v-if="[1].includes(scope.row.state)">
                <el-button @click="test('通过')" type="success" size="mini">通过</el-button>
                <el-button @click="test('拒绝')" type="danger" size="mini">拒绝</el-button>
              </template> -->
              
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <el-pagination class="areaPage" small background
        @current-change="getList"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total,prev,pager,next">
      </el-pagination> -->
    </div>
	</div>
</template>

<script src='./index.js'></script>

<style lang="less" scoped>
.p5{
  padding:5px;
}
.m5{
  margin:5px;
}
.container{
  height:100%;
  @hh:88px;@fh:44px;
  .areaCtrl{
    position: absolute;
    top:0;left:0;right:0;
    height:@hh;
  }
  .areaData{
    position: absolute;
    top:@hh;bottom:@fh;
    left:0;right:0;
  }
  .areaPage{
    position: absolute;
    bottom:0;left:0;right:0;
    height:@fh;
  }
}

</style>
